<template>
    <div class="container">
        <a-tabs class="setting-tab">
            <a-tab-pane key="list" tab="管理员列表">
                <a-button type="primary" style="margin-bottom: 16px" @click="showDialog = true">新增管理员</a-button>
                <a-button type="danger" style="margin-bottom: 16px ; margin-left: 16px" v-permission="'PERMISSION_EDIT'"
                    @click="showPermissionDialog = true">新增权限</a-button>
                <!-- 表格 -->
                <a-table :columns="columns" :dataSource="list" :pagination="{
                    current: page.currentPage,
                    pageSize: page.pageSize,
                    total: page.total,
                    onChange: changePage
                }">
                    <template #bodyCell="{ column, record }">
                        <a-space v-if="column.dataIndex === 'operate'">
                            <a-button type="primary" @click="editRow(record.id)">编辑</a-button>
                            <a-button type="danger" @click="delRow(record.id)">删除</a-button>
                            <a-button @click="updatePassword(record.id)">重置密码</a-button>
                        </a-space>
                        <a-space v-if="column.dataIndex === 'avatar'">
                            <img style="width:60px;heigth:60px" :src="record.avatar" :alt="record.account">
                        </a-space>
                        <a-space v-if="column.dataIndex === 'createdAt'">
                            {{ dayjs(record.createdAt).format('YYYY-MM-DD') }}
                        </a-space>
                    </template>
                </a-table>
            </a-tab-pane>
            <a-tab-pane key="search" tab="信息搜索">
                <SearchAdmin />
            </a-tab-pane>
        </a-tabs>
    </div>
    <addAdmin v-model:showDialog="showDialog"
        @addSuccess="getList({ currentPage: page.currentPage, pageSize: page.pageSize })" />
    <addPermission v-model:showPermissionDialog="showPermissionDialog" @close="getData" />
    <updateAdminVue v-model:showDetail="showDetail" :id="adminId"
        @addSuccess="getList({ currentPage: page.currentPage, pageSize: page.pageSize })" />
</template>

<script setup lang='ts'>
import dayjs from 'dayjs'
import type { IPage } from '@/types/table'
import type { IAdmin } from '@/types/user'
import addAdmin from './components/add-admin.vue'
import addPermission from './components/add-permission.vue'
import updateAdminVue from './components/update-admin.vue'
import SearchAdmin from './components/search-admin.vue'
import { message, Modal } from 'ant-design-vue'

const columns = [
    {
        title: '序号',
        customRender(obj: any) {
            // 要和当前的分页数据进行集合
            // 1 -> 1
            // 2 -> (页码 -1） * 每页条数 + 1
            return (page.currentPage - 1) * page.pageSize + obj.index + 1
        }
    },
    { title: '照片', dataIndex: 'avatar' },
    { title: '账号', dataIndex: 'account' },
    { title: '角色', dataIndex: 'role' },
    { title: '注册时间', dataIndex: 'createdAt' },
    { title: '操作', dataIndex: 'operate' }
]

const showDialog = ref(false)
const showPermissionDialog = ref(false)

const list = ref<IAdmin[]>([])

const page = reactive<IPage>({
    currentPage: 1,
    pageSize: 5,
    total: 0
})

/** 获取管理员列表 */
const getList = async (data: IPage) => {
    const close = message.loading('数据正在加载中...')
    const res = await getAdminList(data)
    list.value = res.data.admin
    page.total = res.data.total
    close()
}
onMounted(() => {
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
})

const changePage = (c: number, p: number) => {
    page.currentPage = c,
        page.pageSize = p
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
}

const showDetail = ref(false)
const adminId = ref(0) // 学生id

// 编辑按钮方法
const editRow = async (id: number) => {
    showDetail.value = true
    adminId.value = id
}

// 删除按钮
const delRow = (id: number) => {
    Modal.confirm({
        title: '提示',
        content: "确定要删除该条数据吗",
        async onOk() {
            await delAdmin(id)
            // 因为删除之后，如果第二页没数据了 还请求第二页数据、
            list.value.length === 1 && page.currentPage-- // 当前页只有一条数据的时候 往前走一页
            // if (list.value.length === 1) {
            //   pageParams.page--
            // }
            getList({ currentPage: page.currentPage, pageSize: page.pageSize })
            message.success("删除数据成功")
        }
    })
}

// 更新密码按钮
const updatePassword = (id: number) => {
    Modal.confirm({
        title: '提示',
        content: "重置密码默认为:123456",
        async onOk() {
            const res = await updatedAdminPassword({ id, password: '123456' })
            if (!res.data.id) return message.error('重置密码失败')
            message.success('重置密码成功')
        }
    })
}

const getData = () => {
    showPermissionDialog.value = false
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
}
</script>

<style lang="less" scoped>
.container {
    padding: 16px;

    .setting-tab {
        background-color: #fff;
        padding: 16px;
        height: 100%;

        .pagination {
            margin-top: 20px;
        }
    }
}
</style>